<template>
  <div>
    <van-cell-group>
      <van-cell title="微信收款码" center class="cell_middle">
        <van-uploader :beforeRead="beforeRead" :afterRead="avatarAfterRead" :delete="deleteImg" >
          <div class="user_avatar_upload">
            <img :src="avatar_default" alt="微信收款码">
          </div>
        </van-uploader>
      </van-cell>
      <van-field
          label="微信账号"
          v-model="wx_account"
          placeholder="请填写您的微信账号"
      />
      <van-field
          label="提现金额"
          v-model="price"
          placeholder="最低提现金额20元"
      />

      <van-cell :title="balance * 100 | yuan" size="large" label="重要提示:请上传微信收款码，否则将无法为您转账，最低提现金额20元，提交申请后，1~2个工作日会提现到您指定的账户。" />
    </van-cell-group>


    <div class="bottom_btn">
      <van-button size="large" type="danger" @click="submiWithdraw" >提现</van-button>
    </div>
  </div>
</template>

<script>
import {saveWithdraw, updateStorage} from "@/api/api";
import avatar_default from '@/assets/images/avatar_default.png';
import {Field,Uploader} from 'vant';
import {getLocalStorage} from "@/utils/local-storage";

export default {
  name: 'user-withdraw',

  props: {
    isLogin: {
      default: true
    }
  },
  data() {
    return {
      uploadImage: [],
      avatar_default: avatar_default,
      urlKey:'',
      wx_account:'',
      price:'',
      balance:100,
    };
  },
  created() {
    this.getBalance();
  },
  methods: {
    getBalance() {
      const infoData = getLocalStorage(
          'withdrawAmount'
      );
      this.balance = infoData.withdrawAmount;
    },
    submiWithdraw(){
      if(this.avatar_default === avatar_default){
        this.$toast.fail('请上传微信收款码');
        return
      }
      if(this.wx_account === ''){
        this.$toast.fail('请输入微信账号');
        return
      }
      if(this.price <= 20){
        this.$toast.fail('请输入正确的金额');
        return
      }
      if(this.price > balance){
        this.$toast.fail('提现金额不能大于可提现余额');
        return
      }

      saveWithdraw({ wxCollPic: this.urlKey,
        wxAccount: this.wx_account,
        price: this.price}).then(res => {
        this.$dialog.alert({ message: '保存成功' }).then(() => {
          this.$router.push('/withdraw/list');
        });
      });
    },
    avatarAfterRead(file) {
      console.log(file);
      const formData = new FormData();
      formData.append("file", file.file);
      updateStorage(formData).then((res) => {
        this.avatar_default = res.data.data.url;
        this.urlKey = res.data.data.key;
        this.$toast({
          message: '上传成功',
          duration: 1500
        });
      }).catch(response => {
        this.$toast({
          message: '上传失败',
          duration: 1500
        });
      })
    },
    beforeRead (file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') {
        this.$toast.fail('请选择正确图片格式上传')
        return false
      }
      return file
    },
    deleteImg (file) {
      for (let i = 0, len = this.uploadImage.length; i < len; i++) {
        if (file.file.name === this.uploadImage[i].name && file.file.size === this.uploadImage[i].size) {
          this.uploadImage.splice(i, 1)
          break
        }
      }
    },
  },
  components: {
    [Uploader.name]: Uploader,
    [Field.name]: Field
  }
};
</script>

<style lang="scss" scoped>
.user_avatar_upload {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid $border-color;
  img {
    max-width: 100%;
    max-height: 100%;
  }
  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: $border-color;
  }
}
.user_quit {
  margin-top: 20px;

}
</style>
